<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>偏移量</title>
</head>

<body>
    <!-- 返回的是一个距离带定位元素的父元素的距离,如果父元素不带定位，则返回到body的距离 -->
    <div style="width:100px;height:100px;background-color:pink; margin: 50px;">

    </div>
    <script>
        var div = document.querySelector('div');
        console.log(div.offsetLeft);

        //有几种方法：element.offsetTop、offsetWidth、offsetHeight;这些返回的是离带定位的父元素的距离，如果没有则返回到page的距离，没有right和bottom，element.offsetParent返回的是定位父元素，否则返回的是body
        // offset.element，这个方法不能对值进行更改，但是style属性是可以对值进行更改的，但style只能够获取行内样式中的值，不能获取到内嵌样式表中的值
        // offset是可以获取任意地方的写的能调用的css值
        //offsetWidth\Height获取的是盒子本来宽度包含了border但不包含margin

        //但是client是不包含边框的但他包含了padding,具体的属性有，clientWidth\Height，想要单独拿到边框的宽度用clientTop\Left
    </script>

</body>

</html>